<template>
    <div class="detail_module_panel other_info">
        <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('common.materialInfo')}}</h3>
        <div class="panel_info_content">
            <el-row v-for="(item,index) in accountList" class="row" :key="index">
                <el-row class="row">
                    <el-col class="label" :span="4" :style="{lineHeight:(item.current&&orderId&&isAuditing)?'28px':1.5}">{{$t('common.withdrawalChannel')}}{{ index + 1 }}</el-col>
                    <el-col class="info" :span="20">
                        <span style="margin:0 40px 0 0;" :class="{'blue': item.current}"> {{ item.accountType | SwitchLoanChannel }}</span>
                        <span v-if="['5','6','7','8','15'].includes(item.accountType)" style="margin:0 40px 0 0;">
                            <span class="label">{{$t('common.withdrawalAccount')}}</span>
                            <span :class="{'blue': item.current}">{{ item.account }}</span>
                        </span>
                        <span v-if="item.accountType === '5'">
                            <span class="label">{{$t('common.bankName')}}</span>
                            <span :class="{ 'blue': item.current}">{{ item.bankName }}</span>
                        </span>
                        <!--<span v-if="item.current && (item.accountType === '5' || item.accountType === '6' || item.accountType === '7')" style="margin:0 0 0 10px">-->
                        <span v-if="item.current&&orderId&&isAuditing" style="margin:0 0 0 10px">
                            <el-button v-if="!isChangeing&&domain!='GoalMete'" type="primary" size="mini" @click="changeSubmit">{{ $t('operation.modify') }}</el-button>
                            <el-button v-if="isChangeing" type="primary" size="mini" :disabled="true">{{ $t('common.changing') }}</el-button>
                        </span>
                    </el-col>
                </el-row>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.idInfoCollect')}}</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <!--医保卡-->
                            <a @click="showImg(userData.philHealthImg)" :style="backgroundImg(userData.philHealthImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.philhealth')}}</span>
                        </li>
                        <li>
                            <!--劳保卡-->
                            <a @click="showImg(userData.pagibigImg)" :style="backgroundImg(userData.pagibigImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.pagbig')}}</span>
                        </li>
                        <li>
                            <!--pRC-->
                            <a @click="showImg(userData.orcImg)" :style="backgroundImg(userData.orcImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">PRC ID</span>
                        </li>
                        <li>
                            <!--OWWA-->
                            <a @click="showImg(userData.owwaImg)" :style="backgroundImg(userData.owwaImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">OWWA ID</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">&nbsp;</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <!--TIN-->
                            <a @click="showImg(userData.tinImg)" :style="backgroundImg(userData.tinImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">TIN ID</span>
                        </li>
                        <li>
                            <!--驾照-->
                            <a @click="showImg(userData.driverImg)" :style="backgroundImg(userData.driverImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{$t('common.driverLicense')}}</span>
                        </li>
                        <li>
                            <!--others-->
                            <a @click="showImg(userData.othersImg)" :style="backgroundImg(userData.othersImg)" href="javascript:void(0);"></a>
                            <span class="img_desc">{{ $t('common.others') }}</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
            <el-row class="row">
                <el-col class="label" :span="4">{{$t('common.others')}}</el-col>
                <el-col class="info" :span="20">
                    <ul class="imgs">
                        <li>
                            <a @click="showImg(imgObj.url || userData.auditSupplementaryImgOne)" :style="backgroundImg(imgObj.url || userData.auditSupplementaryImgOne)" href="javascript:void(0);"></a>
                            <upload-image v-model="imgObj"></upload-image>
                        </li>
                        <li>
                            <a @click="showImg(imgObjTwo.url || userData.auditSupplementaryImgTwo)" :style="backgroundImg(imgObjTwo.url || userData.auditSupplementaryImgTwo)" href="javascript:void(0);"></a>
                            <upload-image v-model="imgObjTwo"></upload-image>
                        </li>
                        <li>
                            <a @click="showImg(imgObjThree.url || userData.auditSupplementaryImgThree)" :style="backgroundImg(imgObjThree.url || userData.auditSupplementaryImgThree)" href="javascript:void(0);"></a>
                            <upload-image v-model="imgObjThree"></upload-image>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <show-image-video :visible.sync="showImgDialog" :video-src="videoUrl" :img-src="imgUrl">图片展示</show-image-video>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import uploadImage from '@/components/upload-image';
    import ShowImageVideo from '@/components/show-image-video';
    import EventBus from '@/libs/event-bus';

    export default {
        name: 'otherInfo',
        props: {
            userData: {
                type: Object
            },
            userId: {
                default: ''
            },
            userBioassayInfo: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        components: {
            ShowImageVideo,
            uploadImage
        },
        data() {
            return {
                domain:'',
                dialogImageUrl: '',
                dialogVisible: false,
                showImgDialog: false,
                imgUrl: '',
                videoUrl: '',
                imgObj: {
                    id: '',
                    url: '',
                },
                imgObjTwo: {
                    id: '',
                    url: '',
                },
                imgObjThree: {
                    id: '',
                    url: '',
                },
                cardPositiveImg: '',
                cardNegativeImg: '',
                userOrderBankInfo: {},
                thisOrderWithdrawChannel: '',
                thisOrderWithdrawAccount: '',
                thisOrderBankName: '',
                isChangeing: false,
                orderId: '',
                accountList: [], // 账号列表
                isAuditing: false, // 是否处于信审中
            };
        },
        watch: {
            'imgObj.url'(val) {
                if (val) {
                    this.changeImg();
                }
            },
            'imgObjTwo.url'(val) {
                if (val) {
                    this.changeImg();
                }
            },
            'imgObjThree.url'(val) {
                if (val) {
                    this.changeImg();
                }
            },
        },
        methods: {
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url, video) {
                if (video && url) {
                    this.videoUrl = url;
                    // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
                    this.imgUrl = '';
                    this.showImgDialog = true;
                } else if (!video && url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                    this.videoUrl = '';
                }
            },
            // 添加图片
            changeImg() {
                const params = {
                    auditSupplementaryImgOne: this.imgObj.url,
                    auditSupplementaryImgTwo: this.imgObjTwo.url,
                    auditSupplementaryImgThree: this.imgObjThree.url,
                    userId: this.userId,
                };
                this.$api.customer.uploadAuditSupplementaryImg(params).then((res) => {
                    const {status, msg} = res;
                    if (status === '1') {
                        //
                    }
                    else {
                        this.$message.error(msg)
                    }
                });
            },
            //根据订单获取当前渠道
            getByOrderId() {
                const params = {
                    orderId: this.orderId
                };
                this.$api.audit.getByOrderId(params).then((res) => {
                const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        // 使用用户信息查询返回的信息作为用户的账号信息
                        // this.thisOrderWithdrawChannel = data.withdrawChannel + '';
                        // this.thisOrderWithdrawAccount = data.withdrawAccount + '';
                        // this.thisOrderBankName = data.bankName;

                        // 0 未处理, 1 信审中, 2 信审通过, 3 信审拒绝, 4 电核中, 5 电核成功, 6 电核拒绝, 7 放款中, 8 放款成功, 9 放款拒绝, 10 逾期未还, 11 还款成功
                        this.isAuditing = data.status === 1;
                        if (this.isAuditing) {
                            this.$emit('isAuditing', true);
                        }
                        this.getReturnStatus();
                    }
                });
            },
            // 获取修改状态
            getReturnStatus() {
                const params = {
                    orderId: this.orderId,
                    account: this.thisOrderWithdrawAccount
                };
                this.$api.audit.queryAccountUpdateStatus(params).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.isChangeing = data.updateStatus === 'true';
                        // 更新账号修改状态和账号
                        EventBus.$emit('AccountModifying', this.isChangeing, this.thisOrderWithdrawAccount);
                    }
                });
            },
            // 修改
            changeSubmit() {
                this.$confirm(this.$t('common.isConfirmChange'), this.$t('salesManage.tips'), {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    const params = {
                        userId: this.userId,
                        orderId: this.orderId,
                        account: this.thisOrderWithdrawAccount
                    };
                    this.$api.audit.updateUserAccount(params).then((res) => {
                        const { status, error } = res;
                        if ('1' === status && '00000000' === error) {
                            this.getReturnStatus();
                            this.$message.success(this.$t('common.successfulOperation'));
                        }
                    });
                }).catch(() => {
                });
            },
            // 获取用户信息，信审专用接口
            getUserInfo() {
                const params = {
                    id: this.userId,
                    orderId: this.orderId
                };
                this.$api.customer.findUserInfoForAudit(params).then(res => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        const { userAccountInfo, userAccountList, } = data;
                        if (userAccountList instanceof Array) {
                            this.accountList = userAccountList;
                        }
                        if (userAccountInfo instanceof Object) {
                            userAccountInfo.current = true;
                            this.accountList.unshift(userAccountInfo);
                            // 使用用户信息查询返回的信息作为用户的当前订单账号信息
                            this.thisOrderWithdrawChannel = userAccountInfo.accountType;
                            this.thisOrderWithdrawAccount = userAccountInfo.account;
                            this.thisOrderBankName = userAccountInfo.bankName;
                            // 更新账号修改状态和账号
                            EventBus.$emit('AccountModifying', this.isChangeing, this.thisOrderWithdrawAccount);
                        }
                    }
                });
            },
        },
        created() {
            if (this.$route.params.id && this.$route.params.orderId) {
                this.orderId = this.$route.params.orderId;
                this.getByOrderId();
            }
            this.domain = this.$storage.get('user').domain;
            console.warn(this.domain)
            this.getUserInfo();
        }
    };
</script>

<style lang="scss" scoped>
    .video {
        /*background-color: rgba(0, 0, 0, 0.4)!important;*/
    }

    .video_placeholder {
        background-image: url("~@/assets/img/vidoe_placeholder.png");
        background-repeat: no-repeat;
        /*background-position: 50% -20px!important;*/
        background-size: contain !important;
        background-color: #fff !important;
    }

    .video_icon {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 32px 32px;
        background-image: url("~@/assets/img/icon_video.png");
    }

    .el-table .red_color {
        color: #FF4949;
    }

    .blue {
        color: #1983fa;
        //font-weight: bold;
    }

    .color_red {
        color: #ff3b30;
    }
    .upload_image {
        text-align: left;
        padding:6px 16px;
    }
</style>
